<!--5930-->

<template>
  <div class="container">
    <div class="headerBody">
      <div class="logo"><Logo style="width: 100px;height: 60px"></Logo></div>
      <div class="title"><h2 style="margin: 20px">汽车销售信息后台管理系统</h2></div>
      <div class="avatar" v-if="myrole!=='root'"><el-avatar @click.native="toMe" style="width:55px; height: 55px; margin: 7px; border-style:solid"><img src="../images/monika.jpg"></el-avatar></div>
    </div>
    <div class="bodyDiv">
      <el-menu class="menu" :default-active="activeIndex">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-s-flag"></i>客户管理</template>
          <el-menu-item index="1-1" @click="toCustomer">
            <i class="el-icon-s-custom"></i>客户名单
          </el-menu-item>
          <el-menu-item index="1-2" @click="toVisit">
            <i class="el-icon-s-shop"></i>到访记录
          </el-menu-item>
        </el-submenu>

        <el-submenu index="2">
          <template slot="title"><i class="el-icon-s-management"></i>业务管理</template>
          <el-menu-item index="2-1" @click="toOrderManagement">
            <i class="el-icon-s-order"></i>订单管理
          </el-menu-item>
          <el-menu-item index="2-2" @click="toVehicleManagement">
            <i class="el-icon-s-home"></i>车辆管理
          </el-menu-item>
        </el-submenu>

        <el-submenu index="3" v-if="myrole==='root'">
          <template slot="title"><i class="el-icon-share"></i>员工管理</template>
          <el-menu-item index="3-1" @click="toStaffManagement">
            <i class="el-icon-s-marketing"></i>员工名单
          </el-menu-item>
          <el-menu-item index="3-2" @click="toSelling">
            <i class="el-icon-s-opportunity"></i>业绩数据
          </el-menu-item>
          <el-menu-item index="3-3" @click="toSalary">
            <i class="el-icon-s-home"></i>薪资查询
          </el-menu-item>
        </el-submenu>

        <el-menu-item index="4" @click="toMe" v-if="myrole!=='root'">
          <i class="el-icon-user-solid"></i>个人信息
        </el-menu-item>
      </el-menu>
      <div class="neirong">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
  import role from "assets/role"
  export default {
    name: "NormalLayout",
    components: {},
    props:{
      /*
      * 外部输入目前显示的页面内容
      * */
      pageIndex: {
        type: String
      }
    },
    data(){
      return{
        myrole:role.state.username,
        /*
        * 高亮位置
        * */
        activeIndex:"1",
        /*
        * 0.系统管理员
        * 1.普通销售员工
        * */
        id:'',
      }
    },
    mounted() {
      this.activeIndex = this.pageIndex;
    },
    methods:{
      /*业务展示界面*/
      toDisplay(){
        this.$router.push({path:'/Display'});
      },
      /*客户名单界面*/
      toCustomer(){
        this.$router.push({path:'/Customer'});
      },
      toVisit(){
        this.$router.push({path:'/Customer/Visit'});
      },
      /*订单管理页面*/
      toOrderManagement(){
        this.$router.push({path:'/Order'})
      },
      /*车辆管理界面*/
      toVehicleManagement(){
        this.$router.push({path:'/Vehicle'})
      },
      /*员工管理*/
      toStaffManagement(){
        this.$router.push({path:'/Staff'})
      },
      /*销售数据*/
      toSellingStatistics(){
        this.$router.push({path:'/Staff'})
      },
      /*个人信息*/
      toUser(){
        this.$router.push({path:'/role/me'})
      },
      /*业绩数据*/
      toSelling(){
        this.$router.push({path:'/Statistics'})
      },
      /*工资查询*/
      toSalary(){
        this.$router.push({path:'/Statistics/Salary'})
      },
      /*个人页*/
      toMe(){
        this.$router.push({path:'/Me'})
      }
    },
  }
</script>

<style scoped>
  .headerBody{
    width: 100%;
    height: 70px;
    display: flex;
    background-color: #00b0eb;
  }
  .logo{
    margin-left: 70px;
    margin-top:5px;
    width: 100px;
    height: 100%;
  }
  .title{
    width: 85%;
    min-width: 400px;
  }
  .avatar{
    width: 5%;
    cursor: pointer;
  }
  .container{
    width: 100%;
  }
  .bodyDiv{
    width: 100%;
    display: flex;
  }
  .menu{
    width: 15%;
    float: left;
    height: 895px;
    background-color: deepskyblue;
  }
  .neirong{
    width: 85%;
    height: 895px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
</style>
